<template>
	<view v-if="show">
		<view class="cu-list menu-avatar comment radius-xl">
			<view class="cu-item" v-for="(item,index) in list" :key="index">

				<view class="cu-avatar round" :style="[{backgroundImage:'url('+ item.user.avatar +')'}]"></view>

				<view class="content">
					<view class="nickNameandTime">
						<view class="nickBox">
							<view class="text-black nickName">{{item.user.nickname}}</view>
							<view class="text-sm score">
								<text class="cuIcon-favorfill text-orange padding-left-mn"
									v-for="(it,indexs) in item.count_number" :key="indexs"></text>
							</view>
						</view>

						<view class="text-gray text-df">{{item.create_time}}</view>
					</view>
					<view class="text-gray text-content text-df">
						{{item.content}}
					</view>
					<view class="bg-grey padding-xs radius margin-top-xs  text-sm light" v-if="item.rep == 1">
						<view class="flex">
							<view>回复：</view>
							<view class="flex-sub">{{item.commonts}}</view>
						</view>
					</view>

					<view class="grid flex-sub col-3 grid-square padding-top-sm">
						<view class="bg-img" :style="'background-image:url(' + it + ')'" v-for="(it,indexs) in item.imglist"
							:key="indexs">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: [Array, Object],
				default: () => [],
			},
			show: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="less" scoped>
	.comment {
		.content {
			.nickNameandTime {
				display: flex;
				justify-content: space-between;

				.nickBox {
					display: flex;
					justify-content: flex-start;
					// .nickName{
					// 	display: inline-block;
					// }
					// .score{
					// 	display: inline-block;
					// }
				}
			}
		}
	}

	.imglists {
		margin-bottom: -10px;
		overflow: hidden;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
		display: flex;
		flex-wrap: wrap;

		.bg-img {
			padding-bottom: calc((100% - 30px) / 3);
			height: 0;
			width: calc((100% - 30px) / 3);
		}
	}
</style>